/*
 * @Author: your name
 * @Date: 2021-11-15 15:26:07
 * @LastEditTime: 2021-11-15 19:21:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue-response-analysis\src\defineReactive.js
 */
import Dep from "./Dep";
import observe from "./obseve";
/** 封装Object.defineProperty函数，第三个参数作为变量，保存新值，设置响应式化，并在获取时返回现在值 */
export default function defineReactive(data, key, val) {
    const dep = new Dep()
    // console.log('我是defineReactive，key值：', key);
    if (arguments.length == 2) {
        // 1.当不传入value值时，值就是本身带有的值(初始没有就是undeifned)
        val = data[key]
    }
    // 2.对传入值进行进一步循环递归
    // 子元素要进行observe，至此形成了递归。这个递归不是自己调用自己，而是多个函数，类循环调用
    let childOb = observe(val)

    Object.defineProperty(data, key, {
        // 可枚举
        enumerable: true,
        // 可以被配置，比如可以被delete
        configurable: true,
        get() {
            // console.log('访问data对象-', key + '的值')

            // 5.如果现在处于依赖的收集阶段 - 添加依赖
            if (Dep.target) {
                dep.depend()

                if(childOb){
                    childOb.dep.depend()
                }
            }

            return val;
        },
        set(newValue) {
            // console.log('设置data对象-', key + '的值', newValue)
            if (val === newValue) return
            val = newValue
            // 3.当设置了新值，这个新值也要被observe（可能会传一个新的对象）
            childOb = observe(newValue)
            // 4. 发布订阅模式，通知dep去改变
            dep.notify()
        }
    })

}